<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/frame.css">
    <link rel="stylesheet" href="css/blue.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        /* tooltip */
        #tooltip{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:2px;
            display:none;
            color:#fff;
        }
    </style>
<body>

<fieldset class="layui-elem-field site-demo-button" style="margin: 30px 0 0 30px;border:0">
    <button class="layui-btn layui-btn-sm a_menu">
        添加新能力
    </button>
</fieldset>

<table class="layui-hide" id="test"></table>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="state" disabled="" value="{{d.state}}" lay-skin="switch" lay-text="运行|停止" lay-filter="state" {{ d.state == 'on' ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>
<script type="text/html" id="apiTpl">
    <a href="api/index.html" data-id="{{ d.id }}" class="layui-table-link" name="instance-btn" target="_blank">doc</a>
</script>
<div style="padding:0 20px;"></div>


<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js" charset="utf-8"></script>

<table class="layui-table" lay-data="{url:'/admin/ability', even:true, page: { layout: ['prev', 'page', 'next', 'skip','count'] }, id:'abilityList'}" lay-filter="abilityList">
    <thead>
    <tr>
        <th lay-data="{type:'numbers'}"></th>
        <th lay-data="{field:'id', width:1}">id</th>
        <th lay-data="{field:'name', width:200}">能力编码</th>
        <th lay-data="{field:'description', minWidth:200}">能力描述</th>
        <th lay-data="{field:'help', align:'center',width:90,templet: '#apiTpl'}">接口规范</th>
        <th lay-data="{field:'state', width:80, templet: '#switchTpl'}">状态</th>
        <th lay-data="{width:178, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs oka-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs oka-btn-radius" lay-event="del">删除</a>
</script>
<script>
    /*
    var message;
    layui.config({
        base: '/js/',
        version: '1.0.1'
    }).use(['app', 'message', "oka"], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
    */
</script>
<script type="text/javascript">

</script>
<script type="text/javascript">


    layui.use(['layer','table','form','oka'], function(){
        var layer = layui.layer,
        table = layui.table,
        form = layui.form;
        //'/controler/ability'


        $('.a_menu').click(function(){
            var url = $(this).attr('href');
            var a = 0;
            /*
            $.ajax({
                url:url
                ,async:false
                ,success:function(res){
                    if(res.code == 0) {
                        layer.msg(res.msg);
                        a = 1;
                    }
                }
            })
            */
            if(a === 0) {

                layer.open({
                    type:2,
                    title:"新增加能力",
                    content:["addAbility.html", 'yes'],
                    area: ['700px', '480px'],
                    end:function(){

                        if(oka.page.ret != undefined) {

                            var d = table.cache.abilityList.slice();
                            var ret = JSON.parse(oka.page.ret);
                            d.push(ret);
                            console.log(d);
                            table.reload("abilityList", {
                                data:d
                            })


                            delete oka.page["ret"];



                            form.render();
                        }
                    }
                });
            }
            return false;
        })
    });



</script>
<script>
    window.pageContext = {};
    layui.use('table', function(){

        var table = layui.table
            ,form = layui.form;

       console.log(table);
        table.on('tool(abilityList)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('确认要删除这个能力？', function(index){
                    oka.loading.open();
                    $.ajax({
                        url:"/admin/ability/"+data.id
                        ,type:"DELETE"
                        ,async:true
                        ,success:function(res){
                            oka.loading.close();
                            if(res == "") {
                                obj.del();
                                layer.close(index);

                            }
                            obj = null;

                        }
                    });
                });
            } else if(obj.event === 'edit'){

                layer.open({
                    type:2,
                    title:"新增加能力",
                    content:["addAbility.html#"+data.id, 'yes'],
                    area: ['700px', '480px'],
                    end:function(){
                        if(oka.page.ret != undefined) {
                            var ret = JSON.parse(oka.page.ret);
                            delete oka.page["ret"];
                            obj.update(ret);
                            console.log(ret);
                            if(ret.state == "on") {
                                obj.tr[0].querySelector('[name="state"]').setAttribute("checked",true);
                            } else {
                                obj.tr[0].querySelector('[name="state"]').removeAttribute("checked");
                            }



                            form.render();
                        }

                    }
                });
                console.log(layer)
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });


        //监听性别操作
        form.on('switch(sexDemo)', function(obj){

            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });
    });
</script>


</body></html>